<template>
  <div class="page">
    <div class="title2">
      登录账号人员列表
    </div>
    <div>
      <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
    </div>
    <el-table
        :data="list"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="account"
          label="账号"
          width="150"
      >
      </el-table-column>
      <el-table-column
          prop="name"
          label="用户名"
          width="120">
      </el-table-column>

      <el-table-column
          prop="role"
          label="角色"
          width="120">

        <template slot-scope="scope">
          <span v-if="scope.row.role==1">养殖企业</span>
          <span v-else>运营人员</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="regTime"
          label="上次登陆时间"
          width="90">
      </el-table-column>

      <el-table-column label="操作" class="max">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="del(scope.row)">删除</el-button>
          <el-button
              size="mini"
              type="primary"

              @click="update(scope.row)">修改</el-button>
          <!-- 点击弹出一个弹窗-->


        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>



    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" :label-width="formLabelWidth">
          <el-select v-model="form.role" placeholder="请选择用户角色">
            <el-option label="养殖企业" :value="1"></el-option>
            <el-option label="运营人员" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addaccount">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="编辑账号" :visible.sync="dialogFormVisible2">
      <el-form :model="form2">

        <el-form-item label="用户账号" :label-width="formLabelWidth2">
          <el-input v-model="form2.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" :label-width="formLabelWidth2">
          <el-select v-model="form2.role" placeholder="请选择用户角色">
            <el-option label="养殖企业" :value="1"></el-option>
            <el-option label="运营人员" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="edit(form2)">确 定</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
import axios from "axios";
export default {
  methods: {

    async del(row) {
      console.log(row);
    let res= await axios.post('/day19_04_ssm_crud_war/users/del',{uid:row.uid});
    console.log(res);
    //做判断
      if (res.data.code==1){
        this.$message({
          message:'删除账号成功',
          type:'success'
        })
        //刷新重新请求当前的数据
        this.getData();
      }else {
        this.$message({
          message: '删除账号失败',
          type: 'error'
        })
      }


    },
    update(data){
      this.dialogFormVisible2 = true;
      console.log('event',data);
      this.form2.account=data.account;
      this.form2.role=data.role;
      this.form2.uid=data.uid;
      console.log('ffff',this.form2);




    },

    async edit(){

      let res = await axios.post('/day19_04_ssm_crud_war/users/edit',this.form2)
      console.log(res)
      if (res.data.code == 1){
        this.$message({
          message:'修改成功',
          type:"success"
        })
        this.getData()
      }else {
        this.$message({
          message:'修改失败',
          type:'error'
        })
      }

    },


    async addaccount(){
      let  res = await axios.post('/day19_04_ssm_crud_war/users/add',this.form);
      console.log(res)
      if (res.data.code==1){
        this.$message({
          message:'新增用户成功',
          type:"success"
        })
        this.dialogFormVisible=false,
        this.getData()
      }else {
        this.$message({
          message:'新增用户失败',
          type:'error'
        })
      }

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //修改当前页码 为当前用户点击的
      this.formData.currentPage=val;
      //进入页面的瞬间获取是第一页数据
      this.getData();
    },
    getData(){
      axios.get('/day19_04_ssm_crud_war/users/list',{params:this.formData}).then(res=>{
        console.log(res);
        this.list=res.data.data;
        //你保存总的数据条数
        this.total=res.data.total;
        console.log(this.list);
      })
    },
  },

  created() {
this.getData();


  },

  data() {
    return {
      formData:{
        currentPage:1,
        pageSize:5
      },
   list:[],
      total:0,
      last_login_time:'',
      // dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible2: false,

      form: {
        account: '',
        role: '',
      },
      form2: {
        uid:'',

        account: '',

        role: '',
      },
      formLabelWidth: '100px',
      formLabelWidth2: '100px',



    }
  }
}
</script>

<style lang="less" scoped>
.page{
margin-left: 200px;
  width: 650px;
}
.title2{
  width: 100%;
  height: 60px;
  color: #6459ed;
  font-weight: 600;
  text-align: center;
  line-height: 60px;
  margin-bottom: 30px;
  font-size: 30px;
  margin-top: 20px;
}
.max{
  width: 120px;
}

</style>